<template>
  <div class="redeem-code" :style="'background:' + details.background_color">
    <div>
      <img v-if="details.banner" :src="details.banner" style="width: 100%; height: 100%;" />
    </div>
    <div style="padding: 0.625rem 0.625rem 0.9375rem;" v-if="details.open_bind==1">
    <van-search v-model="sn" placeholder="请输入兑换码" shape="round">
      <template #left-icon>
        <div>&nbsp;</div>
      </template>
      <template #right-icon v-if="details.type == 1 ">
        <div @click="binding" style="background: var(--themeBaseColor); color: #fff; padding: 0 1.25rem;">绑定</div>
      </template>
    </van-search>

    </div>

    <div class="list" v-if="details.type == 1" :style="goods_num >= 6 ? `height:${Height}px` : 'auto'">
      <div class="box" ref="box" v-for="(item, i) in list" :key="i" @click="showGoodPup(item.id, false, item, i)">
        <div class="img">
          <img :src="item.thumb" />
        </div>
        <div class="list-left">
          <p class="title">{{ item.title }}</p>
          <div style="text-align: left;">
            <span class="plugin" v-for="c_item in item.tags">{{ c_item }}</span>
          </div>
          <p class="plugin">已售{{ item.show_sales }}件</p>
          <div class="list-left-bottom">
            <div style="color: #ed1818;">
              <template v-if="details.show_price==1">
                <font style="font-size: 0.6875rem;">{{ $i18n.t('money') }}</font>
                <span style="font-size: 1rem; font-weight: 500;">{{ item.price }}</span>
              </template>
            </div>
            <div class="cart"  >
              <template v-if="(item.count == 0 && item.has_option !== 1)">
                <div class="cart-icon" @click.stop="cart_handle(i, item)">
                  加入兑换
                  <!-- <i class="iconfont icon-gouwuche2"></i> -->
                </div>
              </template>
              <template v-else-if="item.has_option == 1">
                <div class="option-text-btn" @click.stop="selectOption(item.id, i, item)">
                  选规格<em v-if="item.count">{{ item.count }}</em>
                </div>
              </template>
              <template v-else>
                <span class="minus" @click.stop="operation_handle(i, item.count, 'minus')"></span>
                <span style="font-size: 0.625rem; margin: 0 0.6875rem;">{{ item.count }}</span>
                <span class="plus" v-if="item.is_only==0" @click.stop="operation_handle(i, item.count, 'plus')"></span>
                <span class="plus" v-else  @click.stop="video_handle(i, item.count, 'plus')"></span>
              </template>
            </div>

          </div>
        </div>
      </div>
      <div v-if="current_page<last_page" style="text-align: center; margin-bottom: 0.625rem;" @click="getMoreData">加载更多</div>
    </div>
    <button class="button" :style="'background-color:' + details.button_color" @click="redeem">{{ details.button_text }}
      <template v-if="details.show_hint==1">
        <template v-if="details.type == 2||details.type==3">（未使用{{ details.left }}）</template>
        <template v-else>（最多可选{{ details.exchange_limit }}个商品 已选{{ nums }}个）</template>
      </template>
    </button>
    <p style="margin: 0 auto 1.0938rem; color: #ed1818; font-size: 0.6875rem; font-weight: 500;"
      v-if="details.type == 1 && details.left > 1">未使用兑换码：{{ details.left }}</p>
    <!-- 说明 -->
    <div style="padding: 0 0.625rem 2.8125rem;">
      <div class="explain">
        <p style="text-align: center;">说明</p>
        <div v-html="details.describe"></div>
      </div>
    </div>

    <div class="kefu" v-if="details.service_button == 1" @click="(serviceShow = true)"><i
        class="iconfont icon-member_kefu"></i>
    </div>
    <div class="dingdan" @click="$router.push(fun.getUrl('redeem_code_list'))"><i class="iconfont icon-dingdan"></i>

    </div>


    <!-- 身份兑换  -->
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block">
          <template v-if="details.login_status && share !== 1">
            <div>
              <p class="center fz32">兑换成功</p>
              <p class="level">{{ message_card }}</p>
            </div>
            <button class="confirm" @click="show = false">确定</button>
          </template>
          <template v-else-if="share == 1">
            <div>
              <p class="center fz32">转赠成功</p>
              <p class="level text-left">您转赠的兑换码已经成功转入好友账户！
                请分享给好友！</p>
              <div class="share">
                <span class="close-share" @click="show = false">取消</span>
                <span v-if="fun.getTyep() == 1" class="btn-share" @click="share_handle">分享</span>
                <span v-else class="btn-share" @click.stop v-clipboard:copy="article_url" v-clipboard:success="onCopy">分享</span>
              </div>
            </div>
          </template>
          <template v-else-if="details.login_status == 0">
            <div>
              <p class="center fz32">请登录</p>
              <p class="level">当前有一张兑换券可领取，授权登录后自动领取！</p>
            </div>
            <button class="confirm" @click="loginHandle">登录</button>
          </template>

        </div>
      </div>
    </van-overlay>


       <!--选规格-->
    <van-popup v-model="show2" round position="center" style="overflow: unset;" closeable>
      <div class="spec_box q5" :style="{ width: fun.getPhoneEnv() == 3 ? '375px' : '' }">
        <div class="flex-c good-spec-popup">
          <img :src="popThumb" alt="">
          <div class="title clamp-2">{{ popTitle }}</div>
          <!-- <i class="iconfont icon-adsystem_icon_cancle close-popup" @click="show2=false"></i> -->
          <!-- <van-icon name="cross" @click="show2=false" /> -->
        </div>
        <div class="spec_a">
          <div v-for="(spec, i) in goodsInfo.has_many_specs" :key="i">
            <h5>{{ spec.title }}：</h5>
            <ul class="option">
              <li @click.stop="selectSpecs(item,i)" v-for="(item, index) in spec.specitem" :key="index" :class="specid.indexOf(item.id) >= 0 ? 'cur' : ''">
                {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
        <div class="cart-box">
          <div>数量：</div>
          <div>
            <div class="right"  v-if="popNum==0">
              <div  class="cart-icon" @click.stop="submitAction">
                加入兑换
                <!-- <i class="iconfont icon-gouwuche2"></i> -->
              </div>
            </div>
            <div class="Box" v-if="popNum>=1">
              <i class="iconfont icon-store_reduceLine" @click.stop="changeCount( popNum - 1,-1)"></i>
              <label class="show">{{ popNum }} </label>
              <i class="iconfont icon-store_plus" @click.stop="changeCount(popNum + 1,1)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="add_car" v-if="goodsInfo.has_many_specs">
          <ul class="car_btn flex-c">
            <template v-if="details.show_price==1">
            <li class="left" v-if="goodsInfo.point_goods">
              {{ popPrice }}<span>{{ integral }}</span>
            </li>
            <li class="left" v-else>
              <div class="good-price">
                <span>{{ $i18n.t("money") }}</span
                >{{ popPrice }}
              </div>
            </li>
          </template>
          </ul>
          <div  class="cart-confirm" @click="show2=false">确认</div>
        </div>
    </van-popup>

    <!--配送方式冲突-->
    <van-popup v-model="showChoose" round style="width: 20rem;">
      <div class="wrapper">
        <div class="distribution-block" @click.stop>
          <div class="choose-title">您的配送方式有冲突，请选择其中一种配送方式~</div>
          <div class="choose-content">
            <van-radio-group v-model="radioChoose">
              <div v-for="(item, index) in dispatch_types" :key="index" style="padding: 0.5rem 0;">
                <van-radio :name="index.toString()" checked-color="#ff4949">
                  <div class="radio-title">{{ item.name }}({{ item.member_carts.length }}件)</div>
                </van-radio>
                <ul class="radio-list">
                  <li class="radio-item" v-for="(goods, i) in item.member_carts" :key="i">
                    <p>{{ goods.title }}</p>
                    <p v-if="goods.option_title" style="font-size: 12px; color: #666;">规格：{{ goods.option_title }}</p>
                  </li>
                </ul>
              </div>
            </van-radio-group>
          </div>

          <div class="buttons">
            <div class="button-item">
              <div class="button-content" @click="showChoose = false">返回</div>
            </div>
            <div class="button-item">
              <div class="button-content red" @click="toBuy">去结算</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!--配送方式冲突end-->


    <!-- <yz-specs :carts="carts" :goodsInfo="goodsInfo" v-model="popupSpecs"
      v-on:closeSpecsPopup="close_yz_specs_popup"></yz-specs> -->


    <yzWechatShareImg v-model="showWechatshar"></yzWechatShareImg>
    <!-- 客服弹窗 -->
    <yz-service v-if="details.service_button" v-model="serviceShow" :url="details.cservice.cservice"
      :mobile="details.cservice.service_mobile" :qr="details.cservice.service_QRcode"></yz-service>
    <!-- 商品详情页弹窗 -->
    <yzGoodsPopup :addCartBtn="false" v-model="showgp" :showPrice="details.show_price==1?true:false" :goodsInfo="goodsInfo" v-on:showgoodspecs="showgoodspecs"></yzGoodsPopup>
    <!-- 订单飘窗放在viewer标签里面 会把飘窗的会员头像放大预览 #59819 -->
    <float-order v-if="details.scroll_box ==1 " :broadcast_data="details.broadcast || []" ></float-order>
  </div>
</template>

<script>
import index_controller from "./index_conttoller";
export default index_controller;
</script>

<style scoped lang="scss">
.cart-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;

  .left {
    color: #f15353;
    font-size: 16px;
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .good-price,
    .vip-price {
      width: 100%;
    }

    .good-price {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .vip-price {
      font-size: 10px;
      color: #fdbc2e;
    }

    span {
      font-size: 10px;
    }
  }

  .right span {
    display: block;
    width: 5.5625rem;
    height: 1.875rem;
    line-height: 1.875rem;
    border-radius: 1rem;
    background: #f15353;
    color: #fff;
    font-size: 14px;
  }

  .Box {
    display: flex;

    i {
      width: 28px;
      height: 1.75rem;
      line-height: 1.75rem;
      font-size: 26px;
      color: #f15353;
    }

    .icon-store_reduceLine {
      color: #aaa;
    }

    label {
      right: 2.1875rem;
      color: #333;
      font-size: 12px;
      padding: 0;
      width: 1.5rem;
      height: 1.75rem;
      overflow: hidden;
      display: inline-block;
      text-align: center;
      line-height: 1.75rem;
      vertical-align: top;
      background-origin: content-box;
      background-color: transparent;
    }
  }
}

::v-deep .wrapper .van-overlay {
  z-index: 99999 !important;
}

::v-deep .van-search {
  padding: 0;
  border-radius: 0.3125rem;
  overflow: hidden;
}

::v-deep.van-search .van-cell {
  padding: 0;
  height: 2.5rem;
  line-height: 2.5rem;
}

::v-deep .van-search__content {
  background: #fff;
}

.redeem-code {
  min-height: 100vh;

  .red {
    color: #fff;
    background-color: #f15353;
    border: none;
  }

  .choose-content {
    height: 15rem;
    overflow-y: scroll;
  }

  .radio-item {
    padding: 0.5rem 0;
    border-bottom: solid 1px #f5f5f5;
  }

  .radio-title {
    font-size: 16px;
    font-weight: bold;
  }

  .radio-list {
    padding: 0.5rem;
  }

  .buttons {
    display: flex;
    position: absolute;
    bottom: 0.5rem;
    width: 100%;
  }

  .button-content {
    margin: 0 auto;
    width: 6.5rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.5rem;
    border: solid 1px #b5b5b5;
  }

  .button-item {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .distribution-block {
    position: relative;
    width: 19rem;
    height: 22rem;
    border-radius: 15px;
    background-color: #fff;
    padding: 0.5rem;
    text-align: left;
  }

  .choose-title {
    color: #878787;
    padding: 0.5rem 0.3rem;
    border-bottom: solid 1px #f5f5f5;
  }

  .flex-c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spec_box {
    width: 16.875rem;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0;
    overflow: hidden;

    .good-spec-popup {
      align-items: flex-start;

      img {
        width: 2.8125rem;
        height: 2.8125rem;
        background: #ededed;
        border-radius: 2px;
        margin-right: 6px;
      }

      .title {
        flex: 1;
        font-size: 13px;
        text-align: left;
        line-height: 1.125rem;
        margin-right: 1.3rem;
      }
    }

    .spec_a {
      margin-top: 0.625rem;
      max-height: 14rem;
      overflow-y: scroll;

      h5 {
        display: block;
        line-height: 2.5rem;
        font-size: 0.75rem;
        text-align: left;
      }

      .option {
        display: flex;
        flex-wrap: wrap;

        .cur {
          border: solid 0.0625rem #f15353;
          color: #f15353;
          background-color: rgba($color: #f15353, $alpha: 0.1);
        }

        li {
          font-size: 11px;
          padding: 0 0.875rem;
          line-height: 1.5625rem;
          margin-right: 0.625rem;
          margin-bottom: 0.625rem;
          background: #ededed;
          border: solid 0.0625rem #ededed;
          border-radius: 0.1875rem;
        }
      }
    }
  }

  .add_car {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-top: 0.75rem;
    width: 100%;
    border-top: solid 0.0625rem #ebebeb;
    border-radius: 0 0 0.5rem 0;
    overflow: hidden;

    .car_btn {
      justify-content: space-between;
      height: 100%;
      padding-left: 1rem;

      .left {
        color: #f15353;
        font-size: 16px;
        text-align: left;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .good-price,
        .vip-price {
          width: 100%;
        }

        .good-price {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .vip-price {
          font-size: 10px;
          color: #fdbc2e;
        }

        span {
          font-size: 10px;
        }
      }

      .right span {
        display: block;
        width: 5.5625rem;
        height: 1.875rem;
        line-height: 1.875rem;
        border-radius: 1rem;
        background: #f15353;
        color: #fff;
        font-size: 14px;
      }

      .Box {
        display: flex;

        i {
          width: 28px;
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 26px;
          color: #f15353;
        }

        .icon-store_reduceLine {
          color: #aaa;
        }

        label {
          right: 2.1875rem;
          color: #333;
          font-size: 12px;
          padding: 0;
          width: 1.5rem;
          height: 1.75rem;
          overflow: hidden;
          display: inline-block;
          text-align: center;
          line-height: 1.75rem;
          vertical-align: top;
          background-origin: content-box;
          background-color: transparent;
        }
      }
    }

    .cart-confirm {
      color: #fff;
      background-color: #f15353;
      margin-left: 0.5rem;
      font-size: 0.75rem;
      height: 100%;
      padding: 0.7813rem 2.7188rem;
    }
  }

  .close-popup {
    position: absolute;
    right: -17px;
    top: -31px;
    color: #fff;
    font-size: 28px;
  }

  .option-text-btn {
    background: #f14e4e;
    font-size: 0.75rem;
    color: #fff;
    padding: 0 0.25rem;
    height: 1.375rem;
    line-height: 1.375rem;
    border-radius: 0.25rem;
    position: relative;

    em {
      position: absolute;
      top: -12px;
      right: -8px;
      border-radius: 1rem;
      background: #f14e4e;
      height: 1rem;
      line-height: 1rem;
      padding: 0 0.25rem;
      font-size: 12px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
    }
  }

  .share {
    margin-top: 2.9375rem;
    display: flex;
    justify-content: center;

    span {
      width: 3.75rem;
      height: 1.5625rem;
      line-height: 1.5625rem;
      border-radius: 0.1875rem;
      color: #fff;
    }
  }

  .close-share {
    background: #c1c1c1;
    margin-right: 0.625rem;
  }

  .btn-share {
    background: var(--themeBaseColor);
    margin-left: 0.625rem;
  }

  .text-left {
    text-align: left;
  }

  .kefu,
  .dingdan {
    background-color: rgba(127, 127, 127, 1);
    border-radius: 100px;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: #fff;
  }

  .kefu {
    position: fixed;
    right: 1.3438rem;
    bottom: 9.625rem;
  }

  .dingdan {
    position: fixed;
    right: 1.3438rem;
    bottom: 6.5625rem;
  }

  .icon-gouwuche2 {
    font-size: 0.8rem;
  }

  .icon-member_kefu {
    font-size: 1.3rem;
  }

  .icon-dingdan {
    font-size: 1.1rem;
  }

  .minus,
  .plus {
    display: inline-block;
    position: relative;
    width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 100px;
    color: #fff;
  }

  .minus {
    background: #c7c7c7;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.5625rem;
      height: 0.0625rem;
      background: #fff;
    }
  }

  .cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .plus {
    background: #f15353;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.5625rem;
      height: 0.0625rem;
      background: #fff;
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 0.5625rem;
      width: 0.0625rem;
      background: #fff;
    }
  }

  .list {
    overflow-y: auto;
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.75rem;
    margin: 0 0.625rem 0.9375rem;

    .img {
      width: 4.375rem;
      height: 4.375rem;
      border-radius: 0.3125rem;
      overflow: hidden;
      flex-shrink: 0;
      margin-right: 0.5938rem;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .list::-webkit-scrollbar {
    display: none;
  }

  .center {
    text-align: center;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .confirm {
    border: none;
    background: var(--themeBaseColor);
    color: #fff;
    border-radius: 0.3125rem;
    padding: 0.625rem 2rem;
    font-size: 0.8125rem;
  }

  .level {
    margin-top: 1rem;
    color: #787878;
  }

  .fz32 {
    font-size: 1rem;
  }

  .block {
    width: 17.5rem;
    height: 11.25rem;
    background: #fff;
    border-radius: 0.125rem;
    padding: 1.3125rem 0.9375rem 0.9375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .explain {
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.6rem;
  }

  .button {
    border-radius: 100px;
    border: none;
    width: calc(100% - 1.25rem);
    margin: 0 0.625rem 1.125rem;
    padding: 0.8438rem 0;
    color: #fff;
    font-size: 0.8125rem;
  }

  .title {
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 500;
    color: #222;
    font-size: 0.875rem;
    text-align: left;
  }

  .list-left-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.125rem;
  }

  .plugin {
    text-align: left;
    font-size: 0.625rem;
    color: #999;
    margin: 0 0 0.5rem;
  }

  .box {
    display: flex;
    // justify-content: space-between;
    margin-bottom: 1.6875rem;
  }

  .list-left {
    flex: 1;
  }

  .cart-icon {
    // width: 1.25rem;
    // height: 1.25rem;
    // background: #F15353;
    // border-radius: 100px;
    // color: #fff;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    background: #f14e4e;
    font-size: 0.75rem;
    color: #fff;
    padding: 0 0.25rem;
    height: 1.375rem;
    line-height: 1.375rem;
    border-radius: 0.25rem;
    position: relative;
  }
}
</style>
